<template>
    <el-main style="height: 100%;">
    
    <!-- 模糊查询 -->
        <div class="search-data">
            <span style="margin-right: 10px;">模糊查询：</span>
            <span>姓名：</span><el-input v-model="searchName" placeholder="请输入姓名" style="width: 200px;"></el-input>
            <span style="margin-left: 10px;">身份证号：</span><el-input v-model="searchIdcar" placeholder="请输入身份证号"
                style="width: 300px;"></el-input>
        </div>
        <!--显示数据 -->
        <div class="show-data">
            <div class="left-data">
                <div>
                    <span>预计报道人数{{ reportInfo.count }}人</span>
                </div>
                <div>
                    <span style="margin-right: 10px;">报道数据：</span>
                    <span style="color: #813CC5;margin-right: 10px;">已报道:{{ reportInfo.haveReport }}人</span>
                    <span style="color: #813CC5;margin-right: 10px;">未报道:{{ reportInfo.noReport }}人</span>
                    <span style="color: #813CC5;">报道进度:{{ reportInfo.reportRate }}</span>
                </div>
            </div>
            <div class="right-data">
                <span>报道状态：</span>
                <el-dropdown style="color:#409EFF;font-size: 14px;margin-right: 10px;">
                    <span class="el-dropdown-link">
                        {{reportName}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-plus" @click.native="reportState='全部',reportName='全部'"> 全部 </el-dropdown-item>
                        <el-dropdown-item icon="el-icon-circle-plus"
                            @click.native="reportState='1',reportName='已报到'">已报到</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-circle-plus-outline"
                            @click.native="reportState='9',reportName='未报到'">未报到</el-dropdown-item>
                      <el-dropdown-item icon="el-icon-circle-plus-outline"
                                        @click.native="reportState='0',reportName='暂存'">暂存</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>专业:</span>
                <el-select v-model="selectOpt" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.speciality" :label="item.speciality"
                        :value="item.major">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="queryStuData" style="margin-left: 10px;">查询</el-button>
            </div>
        </div>
        <el-table :data="studata" stripe style="width: 100%;overflow: auto;" height="77%" show-header v-loading="loading">
            <el-table-column prop="name" label="姓名" width="130">
            </el-table-column>
            <el-table-column prop="xbdm" label="性别" width="100">
                <template slot-scope="scope">
                    {{scope.row.sex === '1' ? '男' : '女' }}
                </template>
            </el-table-column>

            <el-table-column prop="idCard" label="身份证号" >
            </el-table-column>

            <el-table-column prop="enrollMajor" label="录取专业">
            </el-table-column>
          <el-table-column prop="enrollInstitute" label="录取学院">
          </el-table-column>
          <el-table-column prop="reportDate" label="报道时间">
            <template slot-scope="scope">
              {{scope.row.reportDate!=null?scope.row.reportDate:''}}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status ==='9'" type="danger">未报道</el-tag>
              <el-tag v-if="scope.row.status ==='0'" type="warning">暂存</el-tag>
              <el-tag v-if="scope.row.status ==='1'" >完成报到</el-tag>
            </template>
          </el-table-column>
            <el-table-column fixed="right" label="操作" >
               <template slot-scope="scope">
                    <el-button @click="handleReport0(scope.row)" type="text" size="small">报到</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagelist">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[7, 15, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

      <zsb-dialog :is-open.sync="zsbOpen" :id="id" @reload="onLoad"></zsb-dialog>
    </el-main>
    
</template>

<script>


import ZsbDialog from "@/components/dialog/ZsbDialog.vue";


export default {
  name: 'Main',
  components: {

    ZsbDialog,

  },
  data() {
    return {
      loading:false,
      selectStu: null,
      cwcOpen: false,
      ejxyOpen: false,
      hqcOpen: false,
      xgcOpen: false,
      zsbOpen: false,
      id: null,
      //报道信息
      reportInfo:null,
      curuser:JSON.parse(localStorage.getItem('CurUser')),
      coloseBtn: "<",
      isCollapse: false,
      menuw: "200px",
      studata: [],
      pageNum: 1,
      pageSize: 7,
      reltotal: 0,
      total: 0,
      reportNum: 0,
      notReportNum: 0,
      reportRate: '',
      options: [],
      selectOpt: "全部",
      searchName: "",
      searchIdcar: "",
      reportState: "全部",
      reportName:"全部",
      // 报道进度测试数据
      activities: [{
        content: '支持使用图标',
        timestamp: '2018-04-12 20:46',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-more'
      }, {
        content: '支持自定义颜色',
        timestamp: '2018-04-03 20:46',
        color: '#0bbd87'
      }, {
        content: '支持自定义尺寸',
        timestamp: '2018-04-03 20:46',
        size: 'large'
      }, {
        content: '默认样式的节点',
        timestamp: '2018-04-03 20:46'
      }]
    }
  },
    watch:{
        
        reportState(){
          this.pageNum=1
            this.onLoad()
        },
      /*selectOpt(){
       console.log(this.selectOpt)
      },*/

    },
    methods: {
        clickme(){
            alert("click");
        },
        handlecolose(){
            this.isCollapse=!this.isCollapse;
            if(this.isCollapse==false){
                this.coloseBtn="<"
                this.menuw="200px"
            }else{
                this.menuw="64px"
                 this.coloseBtn=">"
            }
        },
        getReportInfo(){
          this.$axios.get(this.$httpUrl+"/studata1/getCount?instituteCode="+this.curuser.rolesnum).then(res=>{
            this.reportInfo = res.data.data
          })
        },
        onLoad(){
          this.getReportInfo();
          this.getSpeciality();
          this.loading = true
            this.$axios.post(this.$httpUrl+"/studata1/page",
            {   pageNum:this.pageNum,
                pageSize:this.pageSize,
                map:{enrollMajor:this.selectOpt,
                    name:this.searchName,
                    idcard:this.searchIdcar,
                    reportState:this.reportState,
                    instituteCode:this.curuser.rolesnum+'',
                    status:this.reportState
                }
            }).then(res=>{
                this.total = res.data.total
                this.studata = res.data.data
              this.loading=false
              console.log(this.studata)
            })
            this.getReportNum()
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.onLoad()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.onLoad()
        },
        handleReport0(val){
            this.zsbOpen =true
            this.id=val.id

        },
      // handleReport1(val){
      //   this.ejxyOpen =!this.ejxyOpen;
      //   this.id =val.id
      //
      // },
      // handleReport2(val){
      //   this.cwcOpen =!this.cwcOpen;
      //   this.id =val.id
      //
      // },
      // handleReport3(val){
      //   this.xgcOpen =!this.xgcOpen;
      //   this.id =val.id
      //
      // },
      // handleReport4(val){
      //   this.hqcOpen =!this.hqcOpen;
      //   this.id =val.id
      //
      // },
      //
      //   handleReport(val){
      //       const CurUser = JSON.parse(localStorage.getItem('CurUser'))
      //       this.$axios.get(this.$httpUrl+"/studata1/report/?id="+val+"&opertman="+CurUser.relname).then(res=>{
      //           console.log(res.data);
      //           this.addReport()
      //           this.onLoad()
      //       })
      //
      //   },
      //   handleCancel(val){
      //       this.$axios.get(this.$httpUrl+"/studata1/cancel/?id="+val).then(res=>{
      //           console.log(res.data);
      //           this.cancelReport()
      //           this.onLoad()
      //       })
      //   },
      //   // 获取数据报到人数
      //   getReportNum(){
      //       this.$axios.get(this.$httpUrl+"/reportcount/getcount").then(res=>{
      //           this.reportNum = res.data.data.reportnum
      //           this.notReportNum = res.data.data.notreportnum
      //           this.reltotal =res.data.data.totalnum
      //           this.reportRate = ( (this.reportNum/this.reltotal)* 100).toFixed(2) + '%';
      //       })
      //   },
      //   addReport(){
      //       this.$axios.post(this.$httpUrl+"/reportcount/changcount",{
      //           reportNum: this.reportNum+1,
      //           notReportNum:this.notReportNum-1
      //
      //       }).then(res=>{
      //           console.log(res.data);
      //           this.getReportNum()
      //       })
      //   },
      //   cancelReport(){
      //       this.$axios.post(this.$httpUrl+"/reportcount/changcount",{
      //           reportNum: this.reportNum-1,
      //           notReportNum:this.notReportNum+1
      //
      //       }).then(res=>{
      //           console.log(res.data);
      //           this.getReportNum()
      //       })
      //   },
        // 获取专业数据
        getSpeciality(){
            this.$axios.get(this.$httpUrl+"/speciality/get?instituteCode="+this.curuser.rolesnum+'').then(res=>{
                this.options = [{id: 0,major: "全部"},...res.data.data]
              console.log(this.options)
            })
        },
        queryStuData(){
            this.onLoad();
        },
        calculateAge(birthDateString) {
            // 将日期字符串转换为Date对象  
            const birthDate = new Date(birthDateString);
            // 获取出生年份  
            const birthYear = birthDate.getFullYear();
            // 获取当前日期  
            const today = new Date();
            // 获取当前年份  
            const currentYear = today.getFullYear();
            // 计算年龄（只计算年份差异）  
            const age = currentYear - birthYear;
            return age;
        },
      //计算进度

      getStep(status) {
        if (status >= 0 && status <= 4) {
          return status + 1;
        } else {
          return 0;
        }
      }


    },
    beforeMount(){
      this.onLoad()
    }
  
}
</script>
<style scoped>

.el-menu-item.is-active {
  background-color: #178EFC !important; /* 修改为你想要的颜色 */
}
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}

.headshow {
    height: 10vh;
    width: 100%;
    background-color: aquamarine;
    size: 40px;
}
.colse-btn{
    z-index: 100;
    position: absolute;
    width: 20px;
    height: 150px;
    background-color: #C1C9CF;
    right: 0;
    top: 50%;
    border-radius: 30%;
    text-align: right;
    font-size: 20px;
    font-weight: 900;
    color: #173577;
    line-height: 150px;
    transform: translateX(60%);
    opacity: 0.4;
    cursor: pointer;
    clip-path: inset(0 0 0 40%);
    
}
.colse-btn:hover{
    opacity: 1;
}
.pagelist{
    width: 100%;
    height: 5%;
    display: flex;
    justify-content: center;
}
.show-data{
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: gray */
}
</style>

